import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { ElMessage } from 'element-plus';

import { getUserListApi } from '#/api';

export interface RowType {
  username: string;
  password: string;
  id: string;
  roles: string;
  realName: string;
}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      fieldName: 'username',
      label: 'username',
    },
    {
      component: 'Input',
      fieldName: 'realName',
      label: 'realName',
    },
    {
      component: 'VbenSelect',
      fieldName: 'roles',
      componentProps: {
        allowClear: true,
        filterOption: true,
        options: [
          {
            label: 'super',
            value: 'super',
          },
          {
            label: 'admin',
            value: 'admin',
          },
          {
            label: 'user',
            value: 'user',
          },
        ],
        placeholder: '请选择',
        showSearch: true,
      },
      label: 'roles',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { align: 'left', title: 'Username', field: 'username', width: 100 },
    { field: 'realName', title: 'RealName' },
    { field: 'roles', title: 'Roles' },
    { slots: { default: 'action' }, title: '操作' },
  ],
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        ElMessage.success(`Query params: ${JSON.stringify(formValues)}`);
        return await getUserListApi({
          page: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
};

export { formOptions, gridOptions };
